import styled from "styled-components";

export const ProgramLeftWrap = styled.div`
  width: 709px;
  border-right: 1px solid #d3d3d3;
  padding: 47px 30px 40px 39px;
  background-color: #fff;
  .program-top-box {
    margin-bottom: 20px;
    display: flex;
    .program-img {
      width: 148px;
      height: 148px;
      padding: 3px;
      border: 1px solid #d5d5d5;
    }
    .program-top-text {
      margin-left: 20px;
      .program-top-text-box {
        padding-top: 18px;
        display: flex;
        margin-bottom: 29px;
        .program-tips {
          display: block;
          width: 73px;
          padding-left: 10px;
          height: 24px;
          background-position: 0 -75px;
        }
        span {
          flex: 1;
          line-height: 24px;
          font-size: 20px;
          font-weight: normal;
          margin-left: 10px;
        }
      }
      .program-top-name-box {
        display: flex;
        align-items: center;
        .program-top-tips {
          width: 16px;
          height: 17px;
          background-position: -50px -20px;
          float: left;
        }
        span {
          float: left;
          color: #666;
          font-size: 16px;
          line-height: 26px;
          margin: 0 10px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: 300px;
        }

        .program-dy {
          padding: 0 5px 0 0;
          white-space: nowrap;
          float: left;
          background-position: right -2400px;
          :hover {
            background-position: right -2470px;
          }
          .program-icon {
            padding: 0 10px;
            background-position: 0 -2370px;
            height: 28px;
            overflow: hidden;
            line-height: 29px;
            float: left;
            :hover {
              background-position: 0 -2440px;
            }
            em {
              float: left;
              margin: 7px 4px 0 0;
              width: 14px;
              height: 14px;
              background-position: -50px 0;
            }
          }
        }
      }
    }
  }
  .playlist-play-box {
    margin-bottom: 20px;
    .playlist-playbtn {
      background-position: right -428px;
      padding: 0 5px 0 0;
      margin-right: 6px;
      float: left;
      :hover {
        background-position: right -510px;
      }
      i {
        padding: 0 7px 0 8px;
        color: #fff;
        background-position: 0 -387px;
        display: inline-block;
        height: 31px;
        line-height: 31px;
        overflow: hidden;
        text-align: center;
        cursor: pointer;
        :hover {
          background-position: 0 -469px;
        }
        .ply {
          float: left;
          width: 20px;
          height: 18px;
          margin: 6px 2px 2px 0;
          background-position: 0 -1622px;
          overflow: hidden;
          cursor: pointer;
          display: block;
        }
      }
    }
    .u-btn {
      background-position: right -1020px;
      margin-right: 6px;
      color: #333;
      text-decoration: none;
      padding: 0 5px 0 0;
      white-space: nowrap;
      float: left;
      height: 31px;
      line-height: 30px;
      min-width: 23px;
      cursor: pointer;
      :hover {
        background-position: right -1106px;
      }
    }
    .u-btn-i {
      padding: 0 7px 0 26px;
      float: left;
      height: 31px;
      line-height: 30px;
      min-width: 23px;
      cursor: pointer;
      span {
        float: left;
      }
    }
    .dz-i {
      background-position: 0 -59px;
      padding: 0 6px 0 10px;
      :hover {
        background-position: 0 -141px;
      }
      .dz {
        float: left;
        width: 17px;
        height: 15px;
        margin: 8px 6px 0 0;
        background-position: 0 -95px;
      }
    }
    .zf {
      background-position: 0 -1225px;
      :hover {
        background-position: 0 -1268px;
      }
    }
    .xz {
      background-position: 0 -2761px;
      padding-left: 27px;
      :hover {
        background-position: 0 -2805px;
      }
    }
    .pl {
      background-position: 0 -1465px;
      :hover {
        background-position: 0 -1508px;
      }
    }
    :after {
      content: "";
      clear: both;
      display: block;
      overflow: hidden;
    }
    .u-outlink {
      float: left;
      display: flex;
      align-items: center;
      margin-left: 16px;
      margin-top: 7px;
      .u-icn-music {
        width: 16px;
        height: 16px;
        display: inline-block;
        background-position: -34px -863px;
      }
      a {
        color: #0c73c2;
      }
    }
  }
  .sub {
    height: 35px;
    line-height: 35px;
    display: flex;
    align-items: center;
    .cat {
      text-decoration: none;
      margin: -3px 9px 0 0;
      /* padding: 2px 6px; */
      display: inline-block;
      height: 18px;
      :hover {
        color: #cc0000;
        background-color: #fbeeee;
      }
    }
    strong {
      font-size: 14px;
      font-weight: 700;
      margin-right: 18px;
      span {
        margin-right: 6px;
      }
      .u-type-radio-name {
        max-width: 268px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
      }
    }
    .create-time {
      color: #999;
      margin-right: 18px;
    }
    .play-text {
      color: #999;
      .counttime {
        color: #c20c0c;
        font-weight: bold;
      }
    }
  }
  .p-introduction {
    line-height: 23px;
    color: #666;
    margin-bottom: 30px;
  }
  .program-song-div {
    .program-thead {
      height: 32px;
      padding: 0 10px;
      background: #f7f7f7;
      border: 1px solid #d9d9d9;
      line-height: 33px;
      display: flex;
      justify-content: space-between;
      p {
        font-weight: bold;
        span {
          color: #666;
          font-weight: normal;
        }
      }
    }
    ul {
      border: 1px solid #d9d9d9;
      li {
        height: 31px;
        padding: 6px 10px;
        :nth-child(2n) {
          background-color: #f7f7f7;
        }
        .program-song {
          display: flex;
          align-items: center;
          .program-song-page {
            width: 74px;
            padding: 0 10px;
            .icon-play {
              width: 17px;
              height: 17px;
              cursor: pointer;
              background-position: 0 -103px;
              float: right;
            }
          }
          .program-song-name {
            width: 240px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            padding-right: 30px;
            .song-name {
              color: #aeaeae;
            }
          }
          .program-song-artist {
            width: 90px;
            padding: 0 10px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .program-song-time {
            width: 104px;
            padding: 0 10px;
            .trTimeBox {
              display: none;
              i {
                width: 13px;
                height: 13px;
                margin: 0 1px;
                cursor: pointer;
              }
              .tr-time-add {
                background-position: 0 -700px;
                :hover {
                  background-position: -22px -700px;
                }
              }
              .tr-time-collect {
                width: 18px;
                height: 16px;
                background-position: 0 -174px;
                :hover {
                  background-position: -20px -174px;
                }
              }
              .tr-time-zhuanfa {
                width: 18px;
                height: 16px;
                background-position: 0 -195px;
                :hover {
                  background-position: -20px -195px;
                }
              }
              .tr-time-load {
                width: 18px;
                height: 16px;
                background-position: -81px -174px;
                :hover {
                  background-position: -104px -174px;
                }
              }
            }
            .isSelect {
              display: block;
            }
            .isClose {
              display: none;
            }
          }
          .program-song-info {
            flex: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
    }
    .program-close {
      margin-right: 7px;
    }
  }
`;
